<template>
  <div class="article-card" @click="toArticle(props.article?.articleId as number)">
    <div class="article-card__meta">
      <div class="meta-name meta">{{ props.article?.nickName }}</div>

      <div class="meta-date meta">{{ activeDate(props.article?.pushDate) }}</div>

      <div class="meta-info meta">
        <el-tag>{{ props.article?.tagName }}</el-tag>
      </div>
    </div>

    <div class="article-card__content">
      <div class="content-article">
        <div class="article-title"><span v-html="ReM(props.article?.title)"></span></div>

        <div class="article-abstract">{{ props.article?.articleSummary }}</div>

        <div class="article-list">
          <ul>
            <li>
              <el-icon>
                <View />
              </el-icon>
              <span>{{ transW(props.article?.readCount as number) }}</span>
            </li>
            <li
              class="list--hover"
              @click.stop="clickLike(props.article?.articleId)"
              :style="isLike ? 'color:#4694fa' : ''"
            >
              <i class="vua-icon">
                <svg
                  t="1648024379466"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2219"
                  width="13"
                  height="13"
                >
                  <path
                    d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                    p-id="2220"
                  />
                </svg>
              </i>
              <span>{{ transW(props.article?.likeCount as number) }}</span>
            </li>
            <li class="list--hover">
              <el-icon>
                <chat-dot-round />
              </el-icon>

              <span>{{ transW(props.article?.commentCount as number )}}</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="content-img" v-if="props.article?.articleImg">
        <img :src="props.article?.articleImg" alt="文章封面" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { View, ChatDotRound } from '@element-plus/icons-vue'

import { PropType, ref } from 'vue'

import { activeDate, transW } from '../../../hooks/useNumberFilter'

import { articleCardProps } from './props'

import articleLike from '/@/hooks/useArticle'

import router from '/@/router'

const { EventArticleLike } = articleLike()

interface isRep {
  Is: Boolean
  Text: String
}

let props = defineProps({
  article: Object as PropType<articleCardProps>,
  isReplace: Object as PropType<isRep>
})

let isLike = ref(props.article?.artPariseId ? true : false)

const toArticle = (articeId: number) => {
  const newPage = router.resolve(`/article/${articeId}`)
  window.open(newPage.href, '_blank')
  // router.push(`/article/${articeId}`)
}

const clickLike = (articleId: number) => {
  EventArticleLike(props?.article?.articleId as number, isLike.value).then((res) => {
    if (res) {
      isLike.value ? props.article!.likeCount-- : props.article!.likeCount++
      isLike.value = !isLike.value
    } else {
      alert('请登录!')
    }
  })
}

const ReM = (text: any) => {
  if (props.isReplace) {
    return text.replace(
      new RegExp(`${props.isReplace?.Text}`, 'g'),
      `<span style="color:red">${props.isReplace?.Text}</span>`
    )
  }
  return text
}
</script>

<script lang="ts">
export type ArticleCardProps = articleCardProps
</script>

<style scoped lang="scss">
.article-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 740px;
  height: 134px;
  max-height: 162px;
  padding: 12px 20px 0;
  cursor: pointer;
  border-radius: 6px;
  background-color: white;

  &__meta {
    display: flex;
    align-items: center;
    width: 100%;
    height: 22px;
    background-color: white;

    .meta {
      font-size: 13px;
      line-height: 22px;
    }

    .meta-name {
      overflow: hidden;
      max-width: 162px;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      color: #4e5969;

      &:hover {
        color: #4694fa;
      }
    }

    .meta-date {
      padding: 0 10px;
      color: #86909c;
    }

    .meta-tag {
      color: #86909c;

      &:hover {
        color: #4694fa;
      }
    }

    .meta-info {
      margin-left: auto;
      color: #86909c;
    }
  }

  &__content {
    display: flex;
    width: 100%;
    margin-top: 10px;

    .content-article {
      flex: 1 1 auto;

      .article-title {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        width: 100%;
        text-overflow: ellipsis;
        color: #1d2129;

        -webkit-line-clamp: 1;
      }

      .article-abstract {
        font-size: 13px;
        line-height: 22px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        margin-bottom: 10px;
        text-overflow: ellipsis;
        color: #86909c;

        -webkit-line-clamp: 1;
      }

      .article-list {
        margin-top: 10px;

        ul {
          display: flex;
          align-items: center;

          li {
            font-size: 13px;
            line-height: 20px;
            position: relative;
            display: flex;
            align-items: center;
            flex-shrink: 0;
            margin-right: 15px;
            color: #4e5969;

            span {
              margin-left: 4px;
            }
          }

          .list--hover:hover {
            color: #4694fa;
          }
        }
      }
    }

    .content-img {
      img {
        flex: 0 0 auto;
        width: 120px;
        height: 80px;
        margin-left: 24px;
        border-radius: 2px;
        background-color: #fff;

        object-fit: cover; /*  保持原有尺寸比例。部分内容可能被剪切。 */
      }
    }
  }
}

.vua-icon {
  line-height: 1em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;

  fill: currentColor;
}

</style>
